<template>
    <div class="view">
        <div class="page-preliminary">
            <div class="m-header">
                <div class="logo" @click="isEnd = true">
                    <img src="~@/assets/img/logo.png" alt="">
                </div>
                <div class="session">第{{actInfo.futureChineseNum}}届</div>
                <div class="up-num">已有 <span>{{peopleNum > 9999 ? (Math.floor(peopleNum/1000)/10) + '万' : peopleNum}}</span> 名参与</div>
                <div class="show-menu">
                    <img src="~@/assets/img/preliminary/rule_ico.png" @click="$router.push({path:'/preliminary/rule'})" alt="">
                    <img src="~@/assets/img/preliminary/class_ico.png" v-if="userType==2" @click="visible = true" alt="">
                </div>
            </div>
            <div class="m-plate">
                <div class="tit">{{userType==2?'班级信息':'个人信息'}}</div>
                <div class="plateBox" v-if="userType==2">
                    <div class="vcon">
                        <div class="vname">{{plateInfo.name}}</div>
                        <div class="vinfo">总积分：{{plateInfo.score?plateInfo.score:0}}分</div>
                    </div>
                    <div class="rankicon" v-if="plateInfo.order" :class="[plateInfo.order<4?'rank'+plateInfo.order:'rankon',{'rankov':plateInfo.order>100}]">
                        <span>{{plateInfo.order>100?"100+":plateInfo.order}}</span>
                    </div>
                </div>
                <div class="plateBox stu" v-if="userType==3">
                    <div class="vuserImg">
                        <img :src="plateInfo_self.avatar?plateInfo_self.avatar:headError" :onerror="headError">
                    </div>
                    <div class="vcon flexFull">
                        <div class="vname">{{plateInfo_self.name}}</div>
                        <div class="vinfo">{{plateInfo_self.className}}</div>
                        <div class="vscore">{{plateInfo_self.score}}分</div>
                        
                    </div>
                    <div class="rankicon" v-if="plateInfo_self.order" :class="[plateInfo_self.order<4?'rank'+plateInfo_self.order:'rankon',{'rankov':plateInfo_self.order>100}]">
                        <span>{{plateInfo_self.order>100?"100+":plateInfo_self.order}}</span>
                    </div>
                </div>

            </div>
            <div class="m-con">
                <div class="u-title">比赛内容</div>
                <div class="rank_box" v-for="(item,index) in gameList" :key="index">
                    <div class="card_box" @click="clickMatch(item)">
                        <img :src="item.columnImages" alt="">
                        <div class="card-title">{{item.columnTitle}}</div>
                        <div class="card-num">{{item.columnNum>0?item.columnNum:0}}人已参加</div>
                    </div>
                </div>
                <div class="u-title">排行榜</div>
                <div :class="['kite_box',{'second': tabInd == 1}]">
                    <div class="bg_box">
                        <div class="vTabs">
                            <div :class="['tab-nav',{'on': tabInd == 0}]" @click="tabInd = 0">个人排行榜</div>
                            <div :class="['tab-nav',{'on': tabInd == 1}]" @click="tabInd = 1">班级排行榜</div>
                        </div>
                        <div class="vTabs_con">
                            <div class="tab-pane" v-if="tabInd == 0">
                                <div class="table_head">
                                    <span>排名</span><span>姓名</span><span>积分</span>
                                </div>
                                <div class="table_list self_li" v-if="userType==3">
                                    <div class="libox">
                                        <div :class="['vInd',plateInfo_self.order<4?'vInd'+(plateInfo_self.order-1):'']">
                                            <span>{{plateInfo_self.order>100?"100+":plateInfo_self.order}}</span>
                                        </div>
                                        <div class="vName">
                                            <div class="avater">
                                                <img :src="plateInfo_self.avatar?plateInfo_self.avatar:headError" alt="" :onerror="headError">
                                            </div>
                                            <div class="vinfo">
                                                <span>{{plateInfo_self.name}}</span>
                                                <i>{{plateInfo_self.className}}</i>
                                            </div>
                                        </div>
                                        <div class="vScore">{{plateInfo_self.score}}</div>
                                    </div>
                                </div>

                                <ul class="table_list">
                                    <li v-for="(item,index) in userList" :key="index">
                                        <div class="libox" v-if="collapseShow_user||(!collapseShow_user&&index<10)">
                                            <div :class="['vInd',index<3?'vInd'+index:'']"><span>{{index+1}}</span></div>
                                            <div class="vName">
                                                <div class="avater">
                                                    <img :src="item.avatar?item.avatar:headError" alt="" :onerror="headError">
                                                </div>
                                                <div class="vinfo">
                                                    <span>{{item.name}}</span>
                                                    <i v-if="userType == 3">{{item.className}}</i>
                                                </div>
                                            </div>
                                            <div class="vScore">{{item.score}}</div>
                                        </div>
                                    </li>
                                    <li v-if="userList.length<1">暂无数据</li>
                                </ul>                               
                                <div class="u-collapseBtn" @click="clickCollapse" v-if="userList.length>9">
                                    <span>{{collapseShow_user?'收起全部':'查看全部'}}</span>
                                </div>                        
                            </div>
                            <div class="tab-pane" v-if="tabInd == 1">
                                <div class="table_head">
                                    <span>排名</span><span>班级</span><span>积分</span>
                                </div>
                                <div class="self_con">
                                    <div :class="['vInd',plateInfo.order<4?'vInd'+(plateInfo.order-1):'']">
                                        <span>{{plateInfo.order>20?"20+":plateInfo.order}}</span>
                                    </div>
                                    <div class="vName">
                                        <span>{{plateInfo.name}}</span>
                                    </div>
                                    <div class="vScore">{{plateInfo.score}}</div>
                                </div>
                                <ul class="table_list">
                                    <li v-for="(item,index) in classRankList" :key="index">
                                        <div class="libox" v-if="collapseShow_class||(!collapseShow_class&&index<10)">
                                            <div :class="['vInd',index<3?'vInd'+index:'']"><span>{{index+1}}</span></div>
                                            <div class="vName">
                                                <span>{{item.name}}</span>
                                            </div>
                                            <div class="vScore">{{item.score}}</div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="u-collapseBtn" @click="clickCollapse" v-if="classRankList.length>9">
                                    <span>{{collapseShow_class?'收起全部':'查看全部'}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask" v-if="visible" @click="clickMask"></div>
        <chose-class :visible.sync='visible' :choseClassId.sync='choseClassId'></chose-class>
    </div>
</template>

<script>
import choseClass from './unitSub/choseClass'
import * as api from '@/api/index';
export default {
    name: 'preliminary',
    components: { 
        choseClass
    },
    data () {
        return {
            userInfo: JSON.parse(localStorage.getItem("userInfo")),
            userType: '',
            userTypeName:'',
            actInfo:{},
            peopleNum:0,
            classList:[],
            choseClassId:'',
            plateInfo:{},
            plateInfo_self:{},
            gameList:[],
            tabInd: 0,              //0 --个人排行榜   1 --班级排行榜
            classRankList:[],                   //班级排行榜
            userList:[],                        //个人排行榜
            collapseShow_user: false,
            collapseShow_class: false,
            collapseShow: false,
            visible: false,
            headError: this.$store.state.headError,

        }
    },
    computed: {
        
    },
    created(){
        this.getInit()
        this.getPlateInfo()
        this.GetUserRanking(10)
    },
    mounted(){
    },
    watch:{
        // 切换  0 --个人排行榜   1 --班级排行榜
        tabInd(val){
            if(val == 1 && this.classRankList.length<1){
                this.GetClassRanking(10)
            }
        }
    },
    methods: {
        /*****
		 * 获取活动信息
		 * sstUserType: 1管理 2教师 3学生
         * getFutureInfoById:按照期编号查询诗王争霸期信息 ->活动第几届
         * getEnrollNum: 获取总的参与人数
         * getColumnInfo: 获取比赛项目的信息，包括背景图、项目名、每个项目参与人数
		 * ****/ 
        async getInit(){
            this.userType = this.userInfo.sstUserType
            this.userTypeName = this.userInfo.sstUserType == 2?'mTeacher':'mStudent'
            this.classList = this.userInfo.classList?this.userInfo.classList:[]
            var choseClassId = sessionStorage.getItem('choseClassId')
			this.choseClassId = choseClassId?choseClassId:(this.classList&&this.classList.length?this.classList[0].classId:'')
            var data = {
                futureId: this.userInfo.futureId,
            }
            var [res1,res2,res3] = await Promise.all([
                                    api.getFutureInfoById(data),
                                    api.getEnrollNum(data),
                                    api.getColumnInfo(data)])
            if(res1.resultCode == 1){
                this.actInfo = res1.value?res1.value:{}
            }  
            if(res2.resultCode == 1){
                this.peopleNum = res2.value?res2.value:0
            }    
            if(res3.resultCode == 1){
                this.gameList = res3.value?res3.value:[]
            }          
        },
        /*****
		 * 获取个人信息/班级信息
		 * 当用户类型为教师时，页面信息是当前选中的班级的信息（默认选中第一个），为学生时页面信息是学生信息
         * 用户为教师时rolesClassInfo是当前选中的班级的信息，用户为学生时rolesClassInfo是学生所处班级的信息
		 * ****/ 
        async getPlateInfo(){
            var data={
                classId:this.choseClassId,
                futureId:this.userInfo.futureId,
                userId:this.userInfo.userId,
            }
            var [res1,res2] = await Promise.all([
                                    api.GetMyClassRanking(data),
                                    api.GetMyRanking(data)])
            if(res1.resultCode==1){
                this.plateInfo=res1.value?res1.value:{}
            }
            if(res2.resultCode==1){
                this.plateInfo_self=res2.value?res2.value:{}
            }
        },
        /*****
		 * 获取班级排行榜
         * top: 指定查询前几名   首次11个
		 * ****/ 
        async GetClassRanking(top){
            var data={
                futureId:this.userInfo.futureId,
                top: top
            }
            var res=await api.GetClassRanking(data)
            if(res.resultCode==1){
                this.classRankList=res.value?res.value:[]
                if(top) this.collapseShow_class = false
            }
        },
        /*****
		 * 获取用户排行榜/每个班级内的排名情况
         * top: 指定查询前几名   首次11个
         *  0 --个人排行榜   1 --班级排行榜
         *  1管理 2教师 3学生
		 * ****/ 
        async GetUserRanking(top){
            var data={
                futureId:this.userInfo.futureId,
                top: top
            }
            var apiUrl = this.userType==3?api.GetUserRanking:api.GetUserRankingByClass
            if(this.userType != 3) data = {...data,classId:this.choseClassId}
            var res=await apiUrl(data)
            if(res.resultCode==1){
                this.userList=res.value?res.value:[]
            }
        }, 
        clickCollapse(){
            if(this.tabInd == 0){
                if(this.userList.length<11) this.GetUserRanking()
                this.collapseShow_user = !this.collapseShow_user
            }else {
                if(this.classRankList.length<11) this.GetClassRanking()
                this.collapseShow_class = !this.collapseShow_class
            }
        },
        /*****
		 * 跳转比赛内容
         * columnType 1 诗词背诵  2诗词知识竞答  3飞花令  4诗词知识景点游览
         * userType: 1管理 2教师 3学生
		 * ****/ 
        clickMatch(item){
            var url;
            if(item.columnType == 1){
                url = this.userType == 3?'/poetry/playerList':'/poetry/poetyList'
            }else if(item.columnType == 2){
                url = this.userType == 3?'/pkgame':'/poerybg'
            } else if(item.columnType == 4){
                url = this.userType == 3?'/scence/scenceListS':'/scence/scenceListT'
            }else if(item.columnType == 3){
                url = this.userType == 3?'/game':'/gameStatistics'
            }
            
            this.$router.push({ path: url })
        },
        // 点击遮罩层
        clickMask(){
            this.visible = false
        }
    }
}
</script>
